<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://java.sun.com/jsf/core">

<f:metadata>
    <f:viewParam name="event" value="#{eventDetailsBean.eventId}"/>
    <f:event type="preRenderView" listener="#{eventDetailsBean.eventDetailsInit}" />
</f:metadata>

<head>
</head>
<body>
    <ui:composition template="headerTemplate.xhtml">
        <ui:define name="content">

            <div class="col-md-12">
                <h:form>
                <h1>#{eventDetailsBean.event.title}
                    <small jsf:rendered="#{not (userBean.user.username eq eventDetailsBean.event.creator.username)}">Hosted by #{eventDetailsBean.event.creator}</small>
                    <small jsf:rendered="#{userBean.user.username eq eventDetailsBean.event.creator.username}">Hosted by you</small>
                    <button jsf:outcome="editEvent.xhtml?faces-redirect=true" type="button" jsf:rendered="#{userBean.user.username eq eventDetailsBean.event.creator.username}" class="btn btn-warning pull-right">Edit event
                        <f:param name="event" value="#{eventDetailsBean.event.id}"/>
                    </button>
                </h1>
                </h:form>
            </div>

            <div class="col-md-4">
                          <div class="panel panel-default">
                              <div class="panel-heading">
                                  <h3 class="panel-title">Details</h3>
                              </div>
                              <div class="panel-body">
                                  <ul class="list-unstyled">
                                      <li>
                                          <h4>
                                              <span class="label label-info">Starting date</span>
                                              <span>#{eventDetailsBean.event.startingDate}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Ending date</span>
                                              <span>#{eventDetailsBean.event.endingDate}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Starting time</span>
                                              <span>#{eventDetailsBean.event.startingTime}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Ending Time</span>
                                              <span>#{eventDetailsBean.event.endingTime}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">City</span>
                                              <span>#{eventDetailsBean.event.city}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Address</span>
                                              <span>#{eventDetailsBean.event.addressWithoutCity}</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Event Privacy</span>
                                              <span jsf:rendered="#{eventDetailsBean.event.isPublic}">Public</span>
                                              <span jsf:rendered="#{not eventDetailsBean.event.isPublic}">Private</span>
                                          </h4>
                                      </li>
                                      <li>
                                          <h4>
                                              <span class="label label-info">Location type</span>
                                              <span jsf:rendered="#{not eventDetailsBean.event.outdoor}">Indoor</span>
                                              <span jsf:rendered="#{eventDetailsBean.event.outdoor}">Outdoor</span>
                                          </h4>
                                      </li>
                                  </ul>
                              </div>
                          </div>
                      </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Description</h3>
                    </div>
                    <div class="panel-body">
                        <p class="lead">#{eventDetailsBean.event.description}</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Invited users</h3>
                        </div>
                        <div class="panel-body">
                            <ui:repeat value="#{eventDetailsBean.event.participantCalendarList}" var="calendar">
                                #{calendar.owner} <br/>
                            </ui:repeat>
                        </div>
                    </div>

                    <div jsf:id="joinedUserList" class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Users who accepted the invitation</h3>
                        </div>
                        <div class="panel-body">
                            <ui:repeat value="#{eventDetailsBean.joinedUserList}" var="user">
                                #{user} <br/>
                            </ui:repeat>
                        </div>
                    </div>

                    <div class="panel panel-default" jsf:rendered="#{(not (userBean.user.username eq eventDetailsBean.event.creator.username)) and eventDetailsBean.userInvited}">
                        <div class="panel-heading">
                            <h3 class="panel-title">Your invitation</h3>
                        </div>
                        <div class="panel-body" jsf:rendered="#{eventDetailsBean.editInvitationAnswerAllowed}">
                            <h:form>
                                    <p:outputLabel for="participation" value="Will you participate? " />
                                    <p:selectOneRadio id="participation" value="#{eventDetailsBean.invitation.doesParticipate}">
                                        <f:selectItem itemLabel="Accept" itemValue="#{true}" />
                                        <f:selectItem itemLabel="Decline" itemValue="#{false}" />
                                        <p:ajax listener="#{eventDetailsBean.updateAcceptance}" update=":joinedUserList"/>
                                    </p:selectOneRadio>
                            </h:form>
                        </div>
                        <div class="panel-body" jsf:rendered="#{not eventDetailsBean.editInvitationAnswerAllowed}">
                            <span jsf:rendered="#{eventDetailsBean.invitation.doesParticipate}">You are partecipating</span>
                            <span jsf:rendered="#{not eventDetailsBean.invitation.doesParticipate}">You are not partecipating</span>
                        </div>
                    </div>
                </div>

            <div class="col-md-12">
                    <div class="panel panel-default" jsf:rendered="#{eventDetailsBean.event.outdoor}">
                        <div class="panel-heading">
                            <h3 class="panel-title">Weather Forecast</h3>
                        </div>
                        <div class="panel-body">
                            <h:dataTable id="weatherForecastTable" var="wf" styleClass="table" value="#{eventDetailsBean.event.weatherForecastList}" rendered="#{not empty eventDetailsBean.event.weatherForecastList}">
                                <p:column>
                                    <f:facet name="header">Day</f:facet>
                                    <h:outputText value="#{wf.startingDate}" />
                                </p:column>
                                <p:column>
                                    <f:facet name="header">Condition</f:facet>
                                    <h:outputText value="Cloudy" rendered="#{wf.weatherCondition.cloud}" />
                                    <h:outputText value="Snow" rendered="#{wf.weatherCondition.snow}" />
                                    <h:outputText value="Rainy" rendered="#{wf.weatherCondition.rain}" />
                                    <h:outputText value="Clear" rendered="#{not (wf.weatherCondition.cloud || wf.weatherCondition.rain || wf.weatherCondition.snow)}" />
                                </p:column>
                                <p:column>
                                    <f:facet name="header">Temperature in °C</f:facet>
                                    <h:outputText value="#{wf.weatherCondition.temperature}" />
                                </p:column>
                                <p:column>
                                    <f:facet name="header">Wind in m/s</f:facet>
                                    <h:outputText value="#{wf.weatherCondition.windStrength}" />
                                </p:column>
                            </h:dataTable>
                            <span jsf:rendered="#{empty eventDetailsBean.event.weatherForecastList}">No available weather forecast.</span>
                        </div>
                    </div>
            </div>

            <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Related Notifications</h3>
                        </div>
                        <div class="panel-body">
                            <h:dataTable id="relatedNotificationsTable" var="notification" styleClass="table" value="#{eventDetailsBean.relatedNotificationList}">
                                <p:column>
                                    <f:facet name="header">Receiving Date</f:facet>
                                    <h:outputText value="#{notification.generationDate}" />
                                </p:column>
                                <p:column>
                                    <f:facet name="header">Receiving Time</f:facet>
                                    <h:outputText value="#{notification.generationTime}" />
                                </p:column>
                                <p:column>
                                    <f:facet name="header">Message</f:facet>
                                    <h:outputText value="#{notification.message}" />
                                    <button  jsf:update="unreadNotificationsTable" jsf:action="#{notificationBean.accept(notification)}" jsf:rendered="#{(notification['class'].simpleName == 'BadWeatherNotificationWithSuggestion') and (not empty notification.newStartingDate) }">
                                        Accept
                                    </button>
                                </p:column>
                            </h:dataTable>
                        </div>
                    </div>
            </div>
        </ui:define>
    </ui:composition>
</body>
</html>
